import React from 'react';
import { Row, Col, Switch, Button } from 'antd';
import { STRATEGY_MODE, OPERATOR } from '../../../../utils/constant';
import PopValue from '../../../../components/PopTab/PopValue';
import Operator from '../../../../components/Conditions/Operator';
import WeightRuleExpress from './WeightRuleExpress';
import { compare } from '../../../../utils/compare';
import LabelInput from '../../../../components/LabelInput';
/**
 * @Component RuleItem
 * 
 * {
    "id": "",
    "name": "",
    "condition": "#{condition}",
    "actions": "#{actions}",
    "enabled": true
  }
*/

export default function RuleItem(props) {
  const itemValue = props.value || {};
  const condition = Object.keys(itemValue).length > 0 ? itemValue.condition : {};
  // 修改左值
  const changeLeftValue = (value) => {
    condition.left_var_code = value.var_code;
    condition.left_var_name = value.var_name;
    condition.left_var_type = value.var_type;
    condition.right_var_code = '';
    condition.right_var_name = '';
    condition.right_var_type = '';
    if (value.event_id) {
      condition.left_event_id = value.event_id;
    }
    condition.junction_type = 'none';
    props.onChange && props.onChange(itemValue);
  };

  // 修改右值
  const changeRightValue = (value) => {
    condition.right_var_code = value.var_code;
    condition.right_var_name = value.var_name;
    condition.right_var_type = value.var_type;
    condition.junction_type = 'none';
    if (value.event_id) {
      condition.right_event_id = value.event_id;
    }
    props.onChange && props.onChange(itemValue);
  };

  // 修改操作符
  const changeOperator = (value) => {
    condition.operator = value;
    condition.right_var_code = '';
    condition.right_var_name = '';
    condition.right_var_type = '';
    condition.junction_type = 'none';
    props.onChange && props.onChange(itemValue);
  };

  // 是否启用
  const changeEnabled = (value) => {
    itemValue.enabled = value;
    props.onChange && props.onChange(itemValue);
  };

  // 修改名称
  const handleChangeName = (e) => {
    itemValue.name = e.target.value;
    props.onChange && props.onChange(itemValue);
  };

  // 修改计算权重
  const changeWeightRuleExpress = (value) => {
    itemValue.actions = value;
    props.onChange && props.onChange(itemValue);
  };
  return (
    <>
      <Row type='flex' justify='space-between' align='middle' gutter={20} className='rule-item'>
        <Col span={1}>{props.index}</Col>
        <Col span={3}>
          <LabelInput
            var_name={itemValue.name}
            var_code={itemValue.rule_id}
            isInput={true}
            placeholder={props.isCompare ? '' : '请输入规则名称'}
            disabled={props.disabled}
            onChange={handleChangeName}
            style={compare(props, 'name')}
            showCode={true}
          />
        </Col>
        <Col span={3}>
          <PopValue
            {...props}
            value={{
              var_code: condition.left_var_code,
              var_name: condition.left_var_name,
              var_type: condition.left_var_type,
            }}
            type={condition.left_var_type}
            event_id={condition.left_event_id}
            placeholder={props.isCompare ? '' : '左变量'}
            variable={props.variable}
            using_variables={props.using_variables}
            onChange={changeLeftValue}
            disabled={props.disabled}
            except={['literal']}
            style={compare(props, 'condition', 'left_var_code')}
            dataType={
              condition.operator && condition.operator.operator !== 'risk_level_eq'
                ? condition.operator.data_type_limit
                : undefined
            }
            strategyId={props.strategyId}
            isLeft={true}
          />
        </Col>
        <Col span={3}>
          <Operator
            value={condition.operator}
            placeholder={props.isCompare ? '' : '请选择'}
            onChange={changeOperator}
            operatorOptions={props.operatorOptions}
            disabled={props.disabled}
            style={compare(props, 'condition', 'operator', 'symbol')}
          />
        </Col>
        <Col span={3}>
          {((condition.operator && condition.operator.type === OPERATOR._NO_RIGHT) ||
            (condition.operator && condition.operator.type === OPERATOR._HAS_RIGHT) ||
            !condition.operator) && (
            <PopValue
              {...props}
              value={{
                var_code: condition.right_var_code,
                var_name: condition.right_var_name,
                var_type: condition.right_var_type,
              }}
              type={condition.right_var_type || 'literal'}
              event_id={condition.right_event_id}
              placeholder={props.isCompare ? '' : '右变量'}
              variable={props.variable}
              using_variables={props.using_variables}
              limitType={condition.operator ? condition.operator.varTypeLimit : []}
              onChange={changeRightValue}
              disabled={props.disabled || (condition.operator && condition.operator.type === OPERATOR._NO_RIGHT)}
              style={compare(props, 'condition', 'right_var_code')}
              strategyId={props.strategyId}
              leftVar={condition.left_var_code && { code: condition.left_var_code, type: condition.left_var_type }}
            />
          )}
        </Col>
        <Col span={2} style={compare(props, 'enabled')}>
          {!props.disabled ? (
            <Switch checked={itemValue.enabled === undefined ? true : itemValue.enabled} onChange={changeEnabled} />
          ) : itemValue.enabled === undefined ? (
            true
          ) : itemValue.enabled ? (
            '启用'
          ) : (
            '停用'
          )}
        </Col>
        {props.mode === STRATEGY_MODE._WEIGHT && (
          <Col span={6}>
            <WeightRuleExpress
              value={itemValue.actions}
              onChange={changeWeightRuleExpress}
              variable={props.variable}
              using_variables={props.using_variables}
              disabled={props.disabled}
              isCompare={props.isCompare}
              isOld={props.isOld}
              compareData={props.compareData ? props.compareData.actions : undefined}
            />
          </Col>
        )}

        {!props.disabled && (
          <Col span={3}>
            <Button type='link' onClick={() => props.onDel && props.onDel()}>
              删除
            </Button>
            {props.index > 1 && (
              <Button type='link' onClick={() => props.onMove && props.onMove('up')}>
                上移
              </Button>
            )}
            {props.index !== props.len && (
              <Button type='link' onClick={() => props.onMove && props.onMove('down')}>
                下移
              </Button>
            )}
          </Col>
        )}
      </Row>
    </>
  );
}
